<template>
    <ul class="tags">
        <li v-for="(item,index) in dataSource" :key="index">
            <div class="circle">
                <Tag :name="item.iconstr"/>
            </div>
            {{item.descstr}}
            <div class="del" v-show="editting" @click="delTag(item.id)">
                <Icon name="close"/>
            </div>
        </li>
    </ul>
</template>

<script lang="ts">
    import Vue from 'vue';
    import { Component,Prop } from 'vue-property-decorator';
    @Component
    export default class Tags extends Vue {
        @Prop(Array) dataSource: Object[] | undefined;
        @Prop(Boolean) editting = false;
        nowIndex = 0;

        delTag(tagId: number){
            this.$emit('delTag', tagId);
        }
    }
</script>

<style lang="scss">
    .del{
        position: absolute;  
        top:0px;
        right: 5px;
        .icon {
            width: 12px !important;
            height: 12px !important;
        }              
    }
</style>

<style lang="scss" >
    @import "~@/assets/style/helper.scss";
    .tags{
        flex-grow:1; 
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        
        li{
            display: flex;
            position: relative;
            flex-direction: column;
            align-items: center;
            width:25%;
            font-size: 14px;
            margin: 10px 0;
            .circle{
                width: 50px;
                height: 50px;
                border-radius: (50px/2);
                border:1px solid $color-border;
                padding:7px;
                background-color: $color-bgc;
                margin-bottom: 7px;
            }
        }
        li.highlight{
            .circle{
                background-color: $color-highlight;
                border:1px solid $color-bgc;
            }
        }
    }
</style>